<!--@author vidy3587@gmail.com-->
<template>
  <div class="review-page">
    <Navigator>上传作品</Navigator>
    <div class="col-1 flex vertical-middle horizontal-middle with-banner">
      <div class="content-container">
        <img src="~@/assets/review_success.png" alt="" class="reviewing-image">
        <div class="review-description">{{ statusText }}</div>
        <div class="review-sub-description" v-if="workStatus === WorkStatusEnum.rejected">
          <a class="re-upload" @click="backToUpload">请重新上传</a>
        </div>
        <div class="review-sub-description">
          您的作品编号是 <span class="no">{{ workNumber }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getWorkInfoStatus, WorkStatusEnum} from "@/api/shortVideo";
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
import Navigator from "@/pages/components/navigator";

export default {
  name: "VideoStatus",
  components: {
    Navigator,
  },
  data () {
    return {
      /**@type {UserInfo} */
      userInfo: null,
      WorkStatusEnum,
      /** @type {WorkStatusEnum} */
      workStatus: undefined,//0-审核中 1-审核通过 2-审核未通过 9-未上传
      workNumber: null //审核通过为作品编号 否则为null
    };
  },
  computed: {
    statusText () {
      switch (this.workStatus) {
        case WorkStatusEnum.success:
          return "作品提交成功审核中！";
        case WorkStatusEnum.notUpload:
          return "未上传";
        case WorkStatusEnum.reviewing:
          return "作品审核中！";
        case WorkStatusEnum.rejected:
          return "审核未通过";
        default:
          return "未知状态";

      }
    }
  },
  created() {
    this.userInfo = getUserIdAndNickNameFromRouteQuery(this);
    this.getStatus();
  },
  methods: {
    async getStatus() {
      const res = await getWorkInfoStatus(this.userInfo.id);
      // this.workStatus = res.data.workStatus;
      this.workStatus = 1;
      this.workNumber = res.data.workNumber;
    },
    backToUpload () {
      this.$router.replace({
        name: "short_video_upload",
        query: {
          id: this.userInfo.id,
          name: this.userInfo.name
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.with-banner {
  padding-top: 0;
}
.review-page {
  display: flex;
  flex-direction: column;
  background-color: $short_video_main_color;
  height: 100vh;
}
.content-container {
  width: px2rem(423px);
}

.reviewing-image {
  width: px2rem(423px);
  height: px2rem(161px);
}

.review-description {
  margin-top: px2rem(12px);
  text-align: center;
  color: $short_video_title_color;
  font-size: px2rem(36px);
  font-weight: bold;
}


.review-sub-description {
  margin-top: px2rem(25px);
  text-align: center;
  color: $short_video_title_color;
  font-size: px2rem(36px);

  .no {
    color: $lightFontColor;
  }
}

.re-upload {
  color:$warmColor;
}
</style>